<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>radio</title>
      <!-- 文档公共样式 及组件特有示例样式-->
    <link rel="stylesheet"  href="../../docs.css" />
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Radio</h1>
      <p class="tdesign-demo-wrap__info">开发者：yuhaozhuang</p>
      <p class="tdesign-demo-wrap__info">创建日期：20200525</p>
      <p class="tdesign-demo-wrap__info">说明：--</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <label class="t-radio">
          <input type="radio" class="t-radio__former" value="" />
          <span class="t-radio__input"></span>
          <span class="t-radio__label">默认</span>
        </label>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <label class="t-radio">
            <input type="radio" class="t-radio__former" value="" />
            <span class="t-radio__input"></span><span class="t-radio__label">未选中项</span>
          </label>
        </div>

        <div class="tdesign-demo-block">
          <label class="t-radio t-is-checked">
            <input type="radio" class="t-radio__former" value="" />
            <span class="t-radio__input"></span><span class="t-radio__label">选中项</span>
          </label>
        </div>

        <div class="tdesign-demo-block">
          <label class="t-radio t-is-disabled">
            <input type="radio" class="t-radio__former" value="" />
            <span class="t-radio__input"></span><span class="t-radio__label">未选禁用项</span>
          </label>
        </div>

        <div class="tdesign-demo-block">
          <label class="t-radio t-is-checked t-is-disabled">
            <input type="radio" class="t-radio__former" value="" />
            <span class="t-radio__input"></span><span class="t-radio__label">选中禁用项</span>
          </label>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件类型 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-radio-group t-radio-group-outline t-radio-group-medium">
            <label class="t-radio-button">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项一</span>
            </label>
            <label class="t-radio-button t-is-checked">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项二</span>
            </label>
            <label class="t-radio-button t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项三</span>
            </label>
            <label class="t-radio-button t-is-checked t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项四</span>
            </label>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-radio-group t-radio-group-solid t-radio-group-medium">
            <label class="t-radio-button">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项一</span>
            </label>
            <label class="t-radio-button t-is-checked">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项二</span>
            </label>
            <label class="t-radio-button t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项三</span>
            </label>
            <label class="t-radio-button t-is-checked t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项四</span>
            </label>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">尺寸</h2>
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-radio-group t-radio-group-outline t-radio-group-small">
            <label class="t-radio-button">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项一</span>
            </label>
            <label class="t-radio-button t-is-checked">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项二</span>
            </label>
            <label class="t-radio-button t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项三</span>
            </label>
            <label class="t-radio-button t-is-checked t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项四</span>
            </label>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-radio-group t-radio-group-outline t-radio-group-medium">
            <label class="t-radio-button">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项一</span>
            </label>
            <label class="t-radio-button t-is-checked">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项二</span>
            </label>
            <label class="t-radio-button t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项三</span>
            </label>
            <label class="t-radio-button t-is-checked t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项四</span>
            </label>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-radio-group t-radio-group-outline t-radio-group-large">
            <label class="t-radio-button">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项一</span>
            </label>
            <label class="t-radio-button t-is-checked">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项二</span>
            </label>
            <label class="t-radio-button t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项三</span>
            </label>
            <label class="t-radio-button t-is-checked t-is-disabled">
              <input type="radio" class="t-radio-button__former" value="" />
              <span class="t-radio-button__input"></span><span class="t-radio-button__label">选项四</span>
            </label>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

  </div>

</body>
</html>